[#ftl]
[@define "agile.MultiSelectEditor","agile._MetadataEditor"]
 [#assign templateString]
 	<table>
	<tr>
	<td><div data-dojo-type='agile.NumberComboBox' data-dojo-attach-point="selector" data-dojo-props='options:"{this_options}",width:"{this_width}",title:"{this_title}"'></div></td>
	<td><img class='agileButton agileButtonAdd' data-dojo-attach-point="addButton"></img></td>
	<td><img class='agileButton agileButtonRemove' data-dojo-attach-point="removeButton"></img></td>
	</tr>
	<tr>
		<td>
			<select data-dojo-attach-point="styleOptions" data-dojo-type="dijit/form/MultiSelect" data-dojo-props='multiple:false,style:"width:100%;height:40px"'></select>
		</td>
		<td></td><td></td>
	</tr>	
	</table>
 [/#assign] 
 templateString:"${templateString?js_string}",options:"",title:""
	,init:function(){
//		//console.log(this.declaredClass,this.htmlName);
		agile.stopKeyEvent(this.selector);
		this.own(on(this.addButton,"click",lang.hitch(this,function(){
			var selector = this.selector.get("value");
//			//console.log("@@@@@=",selector,value);
			if(selector != ""){
				var exist = false;
				var options = this.styleOptions.getOptions();
				for(var i = 0; i < options.length; i++){
//					//console.log("options[i].value=",options[i].value);
					if(options[i].value.indexOf(selector) != -1){
						//options[i].label = options[i].value = selector;
						exist = true;
						break;
					}
				}
				if(!exist){
					this.styleOptions.addOption([{label:selector,value:selector}]);	
					this.onChange(this.get("value"),this.name,this.htmlName);
				}					
			}
		})));
		
		this.own(on(this.removeButton,"click",lang.hitch(this,function(){
			var selector = this.selector.get("value");
			if(selector != ""){
				var exist = false;
				var options = this.styleOptions.getOptions();
				for(var i = 0; i < options.length; i++){
					if(options[i].value.indexOf(selector) != -1){
						this.styleOptions.removeOption(options[i]);
						exist = true;
						break;
					}
				}	
				this.selector.reset1("value","");
				if(exist){
					this.onChange(this.get("value"),this.name,this.htmlName);
				}
			}	
		})));
		this.styleOptions.on("change",lang.hitch(this,function(values){
			var style = values[0].split(":");
			this.selector.reset1("value",style[0]);			
		}));	
	}
 	,get:function(name){
		if(name == "value"){
			return this.styleOptions.getValues(",")			
		}
		return this.inherited(arguments);
	}
 	,set:function(name,value){
		if(name == "value"){
			this.styleOptions.setValues(value,",");
			this.selector.reset1("value","");
		}else if(name == "disabled" || name == "readOnly"){
			this.styleOptions.set(name,value);
			this.selector.set(name,value);
		}else{
			this.inherited(arguments);
		}
	}
 	,reset1:function(name,value){
		if(name == "value"){
			this.selector.reset1("value","");
			this.styleOptions.setValues(value,",")				
		}else{
			this.inherited(arguments);
		}
	}
	,isValid:function(){
		[#--TODO: validate the css rule--]
		return true;
	}
[/@]
